<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Test Address</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/css/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/static/css/dataTables.bootstrap.min.css">
    <script type="text/javascript" src="/static/js/jquery-2.1.1.js"></script>
    <script type="text/javascript" src="/static/js/jquery.validate.js"></script>
    <script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" src="/static/js/dataTables.bootstrap.min.js"></script>
    <script>
        $(function () {
            address_table = $('#testAddress').dataTable({
                "oLanguage": {
                    "sProcessing": "正在加载中......",
                    "sLengthMenu": "每页显示 _MENU_ 条记录",
                    "sZeroRecords": "对不起，查询不到相关数据！",
                    "sEmptyTable": "表中无数据存在！",
                    "sInfo": "当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录",
                    "sInfoFiltered": "数据表中共为 _MAX_ 条记录",
                    "sSearch": "模糊查询",
                    "oPaginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    }
                },
                "rowCallback": function (row, data) {
                    $('td:eq(2)', row).html('<a target="_blank" href=' + data[2] + '>' + data[2] + '</a>');
                }
            });
            $.ajax({
                url: "testAddress",
                success: function (data) {
                    for (i in data) {
                        data[i].unshift('<input type="radio" class="radio" name="choose">');
                        address_table.fnAddData(data[i]);
                    }
                }
            });
            $('#create').click(function () {
                create_data = JSON.stringify({
                    "name": $('#addName').val(),
                    "address": $('#addAddress').val(),
                    "system":$('#addSystem').val(),
                    "remark":$('#addComment').val()
                });
                $.ajax({
                    type: 'POST',
                    url: 'testAddress/add',
                    data: create_data,
                    dataType: 'json'
                })
            });
        });
    </script>
</head>
<body>

{% include "header.html" %}

<div class="tab-content" style="margin-top: 100px">
    <div class="container">
        <div style="margin: 10px auto;">
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#createModal">添加</button>
            <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">添加测试环境</h4>
                        </div>
                        <div class="modal-body form-horizontal">
                            <div class="form-group">
                                <label for="addName" class="col-sm-3 control-label">测试环境名称：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="addName" name="addName" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addAddress" class="col-sm-3 control-label">测试环境地址：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="addAddress" name="addAddress" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addSystem" class="col-sm-3 control-label">所属系统：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="addSystem" name="addSystem" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="addComment" class="col-sm-3 control-label">备注：</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" id="addComment" name="addComment"
                                              type="text"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="create">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#changeModal">修改</button>
            <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title">修改测试环境</h4>
                        </div>
                        <div class="modal-body form-horizontal">
                            <div class="form-group">
                                <label for="changeName" class="col-sm-3 control-label">测试环境名称：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="changeName" name="changeName" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="changeAddress" class="col-sm-3 control-label">测试环境地址：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="changeAddress" name="changeAddress" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="changeSystem" class="col-sm-3 control-label">所属系统：</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="changeSystem" name="changeSystem" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="changeComment" class="col-sm-3 control-label">备注：</label>
                                <div class="col-sm-8">
                                    <textarea class="form-control" id="changeComment" name="changeComment"
                                              type="text"></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="change">保存</button>
                        </div>
                    </div>
                </div>
            </div>
            <button class="btn btn-primary" id="delete">删除</button>
        </div>
        <div class="dataTables_wrapper form-inline">
            <table class="table table-striped table-bordered dataTable no-footer" id="testAddress">
                <thead>
                <tr>
                    <th>选择</th>
                    <th>测试环境名称</th>
                    <th>测试环境地址</th>
                    <th>所属系统</th>
                    <th>备注</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>
</div>
</body>
</html>